/* eslint-disable indent */
<template>
  <div class="list">
    <cube-scroll class="leftpanels"
                 ref="leftpanels">
      <ul>
        <li v-for="(list, index) in tabslabel"
            :key="index"
            :class="list.active?'active':''"
            @click="selectList(index)">
          <p> {{list.label}}</p>
        </li>
      </ul>
    </cube-scroll>
    <cube-scroll class="rightpanels"
                 ref="rightpanels">
      <ul>
        <li v-for="(tag, index) in tags"
            :key="index">
          <img :src="tag.image"
               :alt="tag.label">
          <p>{{tag.label}}<i class="cubeic-add"
               @click="addGoods($event,tag)"></i>
          </p>
        </li>
      </ul>
    </cube-scroll>
    <div class="ball-warp">
      <transition @before-enter="beforeEnter"
                  @enter="enter"
                  @afterEnter="afterEnter">
        <div class="ball"
             v-show="ball.show">
          <i class="cubeic-add"></i>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import { setTimeout } from 'timers'
export default {
  data () {
    return {
      ball: {
        show: false,
        el: ''
      },
      tags: [],
      tabslabel: [
        {
          label: '热门推荐',
          active: true
        },
        {
          label: '手机数码',
          active: false
        },
        {
          label: '家用电器',
          active: false
        },
        {
          label: '家用空调',
          active: false
        },
        {
          label: '电脑产品',
          active: false
        },
        {
          label: '计生情趣',
          active: false
        },
        {
          label: '美妆护肤',
          active: false
        },
        {
          label: '口红',
          active: false
        },
        {
          label: '手袋',
          active: false
        },
        {
          label: '金银财宝',
          active: false
        },
        {
          label: '手机数码',
          active: false
        },
        {
          label: '手机数码',
          active: false
        }
      ]
    }
  },
  created () {
    this.getClassify(0)
  },
  methods: {
    selectList (index) {
      this.tabslabel.forEach((val, ind) => {
        if (index === ind) {
          val.active = true
          this.getClassify(index)
        } else {
          val.active = false
        }
      })
    },
    async getClassify (index) {
      try {
        const res = await this.$http.get('/api/classify', { params: { type: index } })
        this.tags = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 设置容器高度
    setHeight () {
      // 获取页面可视区域高度
      const bodyheight = document.documentElement.clientHeight
      const leftpanels = document.querySelector('.leftpanels')
      const rightpanels = document.querySelector('.rightpanels')
      leftpanels.style.height = bodyheight - 57 + 'px'
      rightpanels.style.height = bodyheight - 57 + 'px'
      // 通过refs获取到的dom元素不能修改值
      // console.log(this.$refs.leftpanels.style.height)
      // this.$refs.rightpanels.style.height = bodyheight - 57 + 'px'
    },
    addGoods (e, item) {
      this.$store.commit('setCart', { title: item.label, image: item.image })
      // 动画开始前显示小球
      this.ball.show = true
      this.ball.el = e.target
    },
    beforeEnter (el) {
      // 获取小球
      const dom = this.ball.el
      // 获取小球位置
      const rect = dom.getBoundingClientRect()
      // 小球需要移动的x轴位置
      const x = -(window.innerWidth * 0.52 - rect.left)
      // 小球需要移动的y轴位置
      const y = rect.top - window.innerHeight + 35
      el.style.transform = `translate3d(${x}px,${y}px,0)`
      console.log(x)
    },
    enter (el, done) {
      // 触发重绘
      // eslint-disable-next-line no-unused-expressions
      document.body.offsetHeight
      // 小球回到购物车位置
      el.style.transform = `translate3d(0,0,0)`
      done()
    },
    afterEnter (el) {
      this.ball.show = false
    }
  },
  mounted () {
    setTimeout(() => {
      this.setHeight()
    }, 20)
  }
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  .leftpanels {
    width: 30%;
    li {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #fff;
      color: #333;
      background-color: #f8f8f8;
      font-size: 14px;
    }
    .active {
      background-color: #fff;
      color: #e93b3d;
    }
  }
  .rightpanels {
    width: 70%;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        img {
          width: 70px;
          height: 70px;
        }
        p {
          display: flex;
          justify-content: space-around;
          i {
            font-size: 25px;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .ball-warp {
    .ball {
      position: fixed;
      left: 52%;
      bottom: 35px;
      color: red;
      font-size: 16px;
      transition: all 0.8s cubic-bezier(0.17, 0.67, 0.83, 0.67);
      z-index: 200;
      font-size: 16px;
    }
  }
}
</style>
